<style>

</style>
<template>
  <div>
      <Row style="background:#fff;padding:10px;">
          <Button icon="android-add" class="ivu-btn-default" @click="addRole('增加')">增加</Button>
          <Button icon="android-remove" class="ivu-btn-default" @click="remove(ids)">删除</Button>
          <Button icon="unlocked" class="ivu-btn-default" @click="isActive('启用',ids)">启用</Button>
          <Button icon="locked" class="ivu-btn-default" @click="isActive('禁用',ids)">禁用</Button>
          <Button icon="android-refresh" class="ivu-btn-default" @click="refresh">刷新</Button>
      </Row>
      <Table ref="selection" :columns="columns4" :data="data1" @on-selection-change="idArr"></Table>
      <Page :total="totalElements" :page-size="size" @on-change="page" style="margin-top:30px;text-align:center;"></Page>
      <!-- 增加角色 -->
      <Modal :draggable="true" v-model="modal1"
          :title="modalName"
          :mask-closable="false">
          <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
          <Row v-for="(rowItem,index) in formTemplate.rows" :key="index">
              <Col  v-for="(colItem,index2) in rowItem.cols" :key="index2">
                1111
              </Col>
          </Row>
          </Form>
          <!--<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">-->
            <!--<FormItem label="角色名" prop="name">-->
                <!--<Input v-model="formValidate.name" placeholder="请输入角色名"></Input>-->
            <!--</FormItem>-->
            <!--<FormItem label="是否启用" prop="isActive">-->
                <!--<Select v-model="formValidate.isActive" placeholder="请选择是否启用">-->
                    <!--<Option value="1">启用</Option>-->
                    <!--<Option value="0">禁用</Option>-->
                <!--</Select>-->
            <!--</FormItem>-->
            <!--<FormItem label="角色描述" prop="detail">-->
                <!--<Input v-model="formValidate.detail" placeholder="请输入角色描述"></Input>-->
            <!--</FormItem>-->
        <!--</Form>-->
        <div slot="footer">
            <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
        </div>
      </Modal>
      <!-- 角色绑定权限 -->
      <Modal :draggable="true"
          v-model="modal2"
          title="角色绑定权限"
          :mask-closable="false">
          <Tabs value="name1">
              <TabPane label="菜单" name="name1">
                  <Tree :data="data2" show-checkbox @on-check-change="treeArr"></Tree>
                  <!-- <Button icon="android-add">绑定权限</Button> -->
              </TabPane>
              <TabPane label="按钮" name="name2">
                  <Button icon="android-add" class="ivu-btn-default" @click="modal3 = true">增加</Button>
                  <Button icon="android-remove" class="ivu-btn-default">解绑</Button>
                  <Table :columns="columns3" :data="data3" style="margin-top:20px;"></Table>
                  <Page :total="totalElements2" :page-size="size2" style="text-align:center;margin-top:20px;"></Page>
              </TabPane>
          </Tabs>
          <div slot="footer">
              <Button type="primary" @click="btnMenu">绑定权限</Button>
          </div>
      </Modal>
      <Modal :draggable="true"
        v-model="modal3"
        width="800"
        title="角色列表"
        :mask-closable="false">
        <Row>
            <Button icon="android-add" class="ivu-btn-default">绑定</Button>
            <Button icon="android-refresh" class="ivu-btn-default">刷新</Button>
        </Row>

        <Row style="margin-top:10px;margin-bottom:10px;">
            <Col span="2">
              <Checkbox v-model="disabledSingle" disabled>多选</Checkbox>
            </Col>
            <Col span="12">
              <CheckboxGroup v-model="disabledGroup">
                  <Checkbox label="角色"></Checkbox>
                  <Checkbox label="标识"></Checkbox>
                  <Checkbox label="操作" disabled></Checkbox>
              </CheckboxGroup>
            </Col>
        </Row>
        <Table ref="selection" :columns="columns5" :data="data5"></Table>
        <Page :total="totalElements2" :page-size="size2" style="text-align:center;margin-top:20px;"></Page>
        <div slot="footer">
            <Button type="primary">绑定</Button>
        </div>
    </Modal>
  </div>
</template>
<script>
  export default {
      name: 'Role',
      data () {
          return {
              formTemplate: {},
              totalElements: 10,
              size: 6,
              totalElements2: 10,
              size2: 6,
              totalElements3: 10,
              size3: 6,
              modal1: true,
              modal2: false,
              modal3: false,
              treeId: '',
              treeIds: [],
              modalName: '增加角色',
              type: '',
              ids: [],
              data2: [],
              disabledSingle: true,
              disabledGroup: ['角色', '标识', '操作'],
              formValidate: {
                  id: '',
                  name: '',
                  isActive: '',
                  detail: ''
              },
              ruleValidate: {
                  name: [
                      { required: true, message: '角色名不能为空', trigger: 'blur' }
                  ],
                  detail: [
                      { required: true, message: '角色描述不能为空', trigger: 'blur' }
                  ],
                  isActive: [
                      { required: true, message: '请选择是否启用', trigger: 'change' }
                  ]
              },
              columns4: [
                  {
                      type: 'selection',
                      width: 60,
                      align: 'center'
                  },
                  {
                      title: '操作',
                      key: 'action',
                      align: 'center',
                      render: (h, params) => {
                          return h('div', [
                              h('Button', {
                                  props: {
                                      type: 'text',
                                      size: 'small'
                                  },
                                  style: {
                                      marginRight: '5px'
                                  },
                                  on: {
                                      click: () => {
                                          this.treeId = params.row.id;
                                          this.tree(this.treeId);
                                          this.modal2 = true;
                                      }
                                  }
                              }, '资源权限'),
                              h('Button', {
                                  props: {
                                      type: 'text',
                                      size: 'small'
                                  },
                                  style: {
                                      marginRight: '5px'
                                  },
                                  on: {
                                      click: () => {
                                          let ids = [params.row.id];
                                          this.isActive('禁用', ids);
                                      }
                                  }
                              }, '禁用'),
                              h('Button', {
                                  props: {
                                      type: 'text',
                                      size: 'small'
                                  },
                                  style: {
                                      marginRight: '5px'
                                  },
                                  on: {
                                      click: () => {
                                          this.addRole('编辑', params.row);
                                      }
                                  }
                              }, '编辑'),
                              h('Button', {
                                  props: {
                                      type: 'text',
                                      size: 'small'
                                  },
                                  on: {
                                      click: () => {
                                          let ids = [params.row.id];
                                          this.remove(ids);
                                      }
                                  }
                              }, '删除')
                          ]);
                      }
                  },
                  {
                      title: '名称',
                      key: 'name',
                      align: 'center'
                  },
                  {
                      title: '描述',
                      key: 'detail',
                      align: 'center'
                  },
                  {
                      title: '状态',
                      key: 'isActive',
                      align: 'center'
                  }
              ],
              data1: [],
              columns3: [
                  {
                      type: 'selection',
                      width: 60,
                      align: 'center'
                  },
                  {
                      title: '名称',
                      key: 'name',
                      align: 'center'
                  },
                  {
                      title: '标识',
                      key: 'sign',
                      align: 'center'
                  }
              ],
              data3: [
                  {
                      name: '231',
                      sign: '12'
                  }
              ],
              columns5: [
                  {
                      type: 'selection',
                      width: 60,
                      align: 'center'
                  },
                  {
                      title: 'Action',
                      key: 'action',
                      align: 'center',
                      render: (h, params) => {
                          return h('div', [
                              h('Button', {
                                  props: {
                                      type: 'text',
                                      size: 'small'
                                  },
                                  style: {
                                      marginRight: '5px'
                                  },
                                  on: {
                                      click: () => {
                                          this.show(params.index);
                                      }
                                  }
                              }, '绑定')
                          ]);
                      }
                  },
                  {
                      title: '角色名称',
                      key: 'name',
                      align: 'center'
                  },
                  {
                      title: '标识',
                      key: 'sign',
                      align: 'center'
                  }
              ],
              data5: [
                  {
                      name: 'John Brown',
                      sign: 18
                  }
              ]
          };
      },
      mounted () {
          this.page(1);
          this.initForm();
      },
      methods: {
          page (val) {
              let page = val - 1;
              depot.get({
                  url: 'user/role/findRoleListByPage?page=' + page + '&size=10',
                  cb: (data) => {
                      console.log(data, '总数据');
                      if (data.code === 0) {
                          this.data1.splice(0, this.data1.length);
                          data.data.content.forEach((item, index) => {
                              let obj = {};
                              obj.id = item.id;
                              obj.name = item.name;
                              obj.detail = item.detail;
                              obj.isActive = item.isActive === true ? '启用' : '禁用';
                              this.data1.push(obj);
                          });
                          this.totalElements = data.data.totalElements;
                          this.size = data.data.size;
                      } else if (data.code === 999) {

                      }
                  }
              });
          },
          tree (id) {
              console.log(id);
              depot.get({
                  url: 'user/resource/findBindMenus?type=MENU&roleId=' + id,
                  cb: (data) => {
                      if (data.code === 0) {
                          this.data2.splice(0, this.data2.length);
                          data.data.forEach((item, index) => {
                              let obj = {};
                              obj.id = item.id;
                              obj.title = item.name;
                              obj.expand = false;
                              obj.children = [];
                              obj.checked = item.hasBind === true;
                              item.children.forEach((item2, index2) => {
                                  let obj2 = {};
                                  obj2.id = item2.id;
                                  obj2.title = item2.name;
                                  obj2.expand = false;
                                  obj.checked = item2.hasBind === true;
                                  obj.children.push(obj2);
                              });
                              this.data2.push(obj);
                          });
                      } else if (data.code === 999) {

                      }
                  }
              });
          },
          treeArr (arr) {
              this.treeIds.splice(0, this.treeIds.length);
              arr.forEach((item, index) => {
                  this.treeIds.push(item.id);
              });
          },
          // 绑定权限
          btnMenu () {
              depot.post({
                  url: 'user/role/bindRoleAndResource?type=MENU&id=' + this.treeId,
                  data: this.treeIds,
                  cb: (data) => {
                      if (data.code === 0) {
                          this.$Message.success('绑定成功');
                          this.modal2 = false;
                      } else {
                          this.$Message.error(data.message);
                      }
                  }
              });
          },
          // 增加角色
          addRole (type, item) {
              this.initForm();
              // if (type === '增加') {
              //   this.modalName = '增加角色'
              //   this.formValidate.id = ''
              //   this.formValidate.name = ''
              //   this.formValidate.isActive = ''
              //   this.formValidate.detail = ''
              // }
              // if (type === '编辑') {
              //   console.log(item)
              //   this.modalName = '编辑角色'
              //   this.formValidate.id = item.id
              //   this.formValidate.name = item.name
              //   this.formValidate.isActive = item.isActive === '启用' ? '1' : '0'
              //   this.formValidate.detail = item.detail
              // }
              // this.type = type
              this.modal1 = true;
          },
          // 初始化表单
          initForm () {
              this.formTemplate = {
                  rows: [{
                      cols: [{
                          span: 6
                      }, {
                          span: 6
                      }, {
                          span: 6
                      }, {
                          span: 6
                      }]
                  }, {
                      cols: [{
                          span: 6
                      }, {
                          span: 6
                      }, {
                          span: 6
                      }, {
                          span: 6
                      }]
                  }, {
                      cols: [{
                          span: 24
                      }]
                  }]
              };
          },
          handleSubmit (name) {
              this.$refs[name].validate((valid) => {
                  if (valid) {
                      let url;
                      if (this.type === '增加') {
                          url = 'user/role/addRole';
                      } else {
                          url = 'user/role/updateRole';
                      }
                      depot.post({
                          url: url,
                          data: this.formValidate,
                          cb: (data) => {
                              if (data.code === 0) {
                                  this.$Message.success(this.type + '成功');
                                  this.modal1 = false;
                                  this.page(1);
                              } else {
                                  this.$Message.error(data.message);
                              }
                          }
                      });
                  } else {
                      this.$Message.error('Fail!');
                  }
              });
          },
          idArr (arr) {
              this.ids.splice(0, this.ids.length);
              arr.forEach((item, index) => {
                  this.ids.push(item.id);
              });
              console.log(this.ids);
          },
          // 删除
          remove (ids) {
              depot.post({
                  url: 'user/role/deleteRole',
                  data: ids,
                  cb: (data) => {
                      if (data.code === 0) {
                          this.$Message.success('删除成功');
                          this.modal1 = false;
                          this.page(1);
                      } else {
                          this.$Message.error(data.message);
                      }
                  }
              });
          },
          // 批量启用 禁用
          isActive (type, arr) {
              let url;
              if (type === '启用') {
                  url = 'user/role/changeRoleActive?isActive=true';
              }
              if (type === '禁用') {
                  url = 'user/role/changeRoleActive?isActive=false';
              }
              depot.post({
                  url: url,
                  data: arr,
                  cb: (data) => {
                      if (data.code === 0) {
                          this.$Message.success(type + '成功');
                          this.page(1);
                      } else {
                          this.$Message.error(data.message);
                      }
                  }
              });
          },
          // 刷新
          refresh () {
              location.reload();
          }
      }
  };
</script>
